<template>
  <card>
    <Form :ref='serchForm' :model='serchForm' inline>
      <FormItem>
          <Input v-model="serchForm.domain" placeholder="请输入您要查询的域名" @on-change="changeDomian" clearable></Input>
      </FormItem>
      <FormItem>
          <Select v-model="serchForm.auditStatus" style="width:200px" placeholder="请选择是否实名认证" @on-change="changeselect" clearable>
              <Option v-for="item in serverList" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
      </FormItem>
      <FormItem>
        <Checkbox v-model="serchForm.expirType" @on-change="changetype">即将过期域名</Checkbox>
      </FormItem>
      <FormItem>
        <Checkbox v-model="serchForm.expired" @on-change="changetype">已过期域名</Checkbox>
      </FormItem>
    </Form>
    <div style="text-align: right;">
        <Button  type='primary' @click="changeConfig" v-hasC="{name: '-v1-site-domain-info-setting-operation',flag: '/v1/site/domain-info/setting-operation'}">参数配置</Button>
    </div>
    <Table :columns="columns" :data="tableData" :loading="tableLoading" style="margin-top:10px" @on-sort-change="sortchange">
      <template slot-scope="{row}" slot="option">
        <span type="text" @click="changeeit(row)" class="fontstyle mr-10" v-hasC="{name: '-v1-site-domain-info-remark-add',flag: '/v1/site/domain-info/remark-add'}">添加备注</span>
        <span type="text" @click="changstatus(row,'0')" class="fontstyle" v-hasC="{name: '-v1-site-domain-info-del',flag: '/v1/site/domain-info/del'}">删除</span>
      </template>
    </Table>
    <div style="text-align: center;margin-top: 10px;">
       <Page :current.sync="currentPage" :total="total" :page-size="pageSize" :page-size-opts="pageSizeArray" show-sizer show-total show-elevator @on-change="changePage" @on-page-size-change="changePageSize"/>
    </div>
    <!-- 参数配置 -->
    <Modal v-model="modalConfig" title="域名平台参数配置" width="1000" :mask-closable="false">
        <Form ref='modalname' :model='modalparams' :rules='createRules'>
            <template v-for="(item, index) in modalparams.list">
                    <Row :key="index" :gutter="16">
                        <Col span="4">
                            <FormItem :prop="'list.' + index + '.platform'" :rules="{required: true, message: '请选择配置', trigger: 'change'}">
                                <Select placeholder="请选择配置" v-model="item.platform">
                                    <Option  v-for="item in platformList" :value="item.value" :key="item.value" >{{ item.lable }}</Option>
                                </Select>
                            </FormItem>
                        </Col>
                        <Col span="6">
                            <FormItem  :prop="'list.' + index + '.access_key_id'" :rules="{required: true, validator: validatorNumber, trigger: 'blur'}">
                                <Input  v-model="item.access_key_id" placeholder="请输入accessKeyId值"/>
                            </FormItem>
                        </Col>
                         <Col span="8">
                            <FormItem  :prop="'list.' + index + '.access_key_secret'" :rules="{required: true, validator: validatorKey, trigger: 'blur'}">
                                <Input   v-model="item.access_key_secret" placeholder="请输入accessKeySecret值"/>
                            </FormItem>
                        </Col>
                        <Col>
                            <Button type="error" icon="md-remove" v-if="modalparams.list.length>1" @click="removeset(index)"></Button>
                            <Button v-if="index === modalparams.list.length-1" type="success" icon="md-add" class="ivu-ml-8" @click="addset"></Button>
                        </Col>
                    </Row>
                </template>
        </Form>
        <div slot='footer'>
            <Button @click='cancelAdd(modalname)'>取消</Button>
            <Button @click='submitAdd(modalname)' :loading="modal_loading" type='primary'>确定</Button>
        </div>
    </Modal>
    <!-- 添加备注 -->
    <Modal v-model="modalstatus" title="添加备注" width="500" :mask-closable="false">
       <Form :ref='modalData' :model='modalForm' :rules="rules">
          <FormItem >
            <Input v-model="modalForm.remark" type="textarea" :autosize="{minRows:6,maxRows: 8}" placeholder="请输入备注信息" />
          </FormItem>
       </Form>
      <div slot='footer' >
          <Button @click='canceledit(modalData)'>取消</Button>
          <Button  type='primary' :loading="subloading" @click='submitedit(modalData)'>确定</Button>
     </div>
    </Modal>
    <Modal
        v-model="modaldel"
        title="删除提醒"
        @on-cancel="cancel" width="420" :mask-closable="false">
        <p >确定删除此域名？</p>
        <div slot="footer">
            <Button type="error" :loading="modal_loading" @click="del">确定删除</Button>
            <Button @click="cancel">取消</Button>
        </div>
    </Modal>
  </card>
</template>
<script>
    import templateVue from '../../components/search/template.vue';
    import { demianList, remarkAdd, domainInfodel,settingOoperation,settingList } from './../../api/demian'
    export default {
        data () {
            return {
                modalData:'modalData',
                serchForm: {
                    domain: '',
                    auditStatus: '',
                    expired: 0,
                    expirType: 0,
                    domain_order_type: '', // 域名排序：
                    regist_order_type: '', // 注册时间排序：
                    expir_order_type: '', // 到期时间排序：
                    audit_order_type: '', // 实名认证排序：
                    registrant_order_type: '', // 所属类型排序：
                    account_order_type: '', // 账号排序：
                    update_order_type: ''// 更新时间排序：
                },
                serverList: [

                    {
                        value: 1,
                        label: '实名认证失败'
                    },
                    {
                        value: 2,
                        label: '实名认证成功'
                    },
                    {
                        value: 3,
                        label: '未实名认证'
                    },
                    {
                        value: 4,
                        label: '审核中'
                    }
                ],
                tableData: [],
                tableLoading: false,
                modalstatus: false,
                modalConfig:false,
                modalname: 'modalname',
                columns: [
                    {
                        title: '序号',
                        minWidth: 70,
                        align: 'center',
                        render: (h, params) => h('span', params.index + 1)

                    },
                    {
                        title: '域名',
                        minWidth: 160,
                        align: 'center',
                        key: 'domain_name',
                        sortable: 'custom'

                    },
                    {
                        title: '注册时间',
                        minWidth: 160,
                        align: 'center',
                        key: 'registration_date',
                        sortable: 'custom'

                    },
                    {
                        title: '过期时间',
                        minWidth: 120,
                        key: 'expiration_date',
                        align: 'center',
                        render (h, params) {
                            return h('span', {
                                style: {
                                    color: params.row.expiration_date && params.row.expiration_date - new Date().getTime() <= 86400000 ? 'red' : '#515a6e'
                                }
                            }, params.row.expiration_date);
                        },
                        sortable: 'custom'

                    },
                    {
                        title: '域名实名认证状态',
                        minWidth: 180,
                        key: 'domain_audit_status_str',
                        align: 'center',
                        sortable: 'custom'

                    },
                    {
                        title: '域名注册联系人类型',
                        minWidth: 180,
                        align: 'center',
                        key: 'registrant_type_str',
                        sortable: 'custom'

                    },
                    {
                        title: '更新时间',
                        minWidth: 180,
                        align: 'center',
                        key: 'updated_at',
                        sortable: 'custom'

                    },
                    {
                        title: '所属账户',
                        minWidth: 160,
                        key: 'account',
                        align: 'center',
                        sortable: 'custom'
                        // key: 'platform'

                    },
                    {
                        title: '备注',
                        minWidth: 120,
                        align: 'center',
                        key: 'remark',
                        tooltip: true

                    },
                    {
                        title: '操作',
                        minWidth: 160,
                        align: 'center',
                        slot: 'option',
                        fixed: 'right'

                    }

                ],
                currentPage: 1,
                total: 0,
                pageSize: 10,
                pageSizeArray: [10, 20, 50, 100],
                modalForm: {
                    remark: ''
                },
                rules: {
                    remark: [{ required: true, message: '请输入备注', trigger: 'blur' }]
                },
                subloading: false,
                modaldel: false,
                modal_loading: false,
                id: null,
                modalparams:{
                    list:[
                        {
                            id:'',
                            platform:'',
                            access_key_id:'',
                            access_key_secret:''

                        }
                    ]
                },
                platformList:[
                    {
                        lable: "阿里云",
                        value: "1"
                    }
                ],
                createRules:{}

            }
        },
        created () {
            this._demianList()
        },
        methods: {
            validatorNumber (rule, value, callback)  {
                var rep= new RegExp(/^([a-zA-Z0-9]{1,9999})$/);
                if(!value) {
                    return callback(new Error('请输入accessKeyId值'));
                }else if(!rep.test(value)) {
                    return callback(new Error('只允许数字、字母（不区分大小写）'));
                }else {
                    callback();
                }
            },
            validatorKey (rule, value, callback)  {
                var rep= new RegExp(/^([a-zA-Z0-9]{1,9999})$/);
                if(!value) {
                    return callback(new Error('请输入accessKeySecret值'));
                }else if(!rep.test(value)) {
                    return callback(new Error('只允许数字、字母（不区分大小写）'));
                }else {
                    callback();
                }
            },
            changePage (index) {
                this.currentPage = index;
                this._demianList()
            },
            changePageSize (val) {
                this.pageSize = val;
                this._demianList()
            },
            changeDomian () {
                this._demianList()
            },
            changeselect () {
                this._demianList()
            },
            changetype () {
                this._demianList()
            },
            // 排序
            sortchange (e) {
                // console.log(e, 'cccc')
                // let sort = 0
                // if (e.order == 'desc') {
                //     sort = 2;
                // } else if (e.order == 'asc') {
                //     sort = 1;
                // } else {
                //     sort = 0;
                // }
                if (e.key === 'domain_name') {
                    this.serchForm.domain_order_type = e.order == 'normal' ? '' : e.order
                } else if (e.key === 'registration_date') {
                    this.serchForm.regist_order_type = e.order == 'normal' ? '' : e.order
                } else if (e.key === 'expiration_date') {
                    this.serchForm.expir_order_type = e.order == 'normal' ? '' : e.order
                } else if (e.key === 'domain_audit_status_str') {
                    this.serchForm.audit_order_type = e.order == 'normal' ? '' : e.order
                } else if (e.key === 'registrant_type_str') {
                    this.serchForm.registrant_order_type = e.order == 'normal' ? '' : e.order
                } else if (e.key === 'account') {
                    this.serchForm.account_order_type = e.order == 'normal' ? '' : e.order
                } else if (e.key === 'updated_at') {
                    this.serchForm.update_order_type = e.order == 'normal' ? '' : e.order
                }
                this._demianList()
            },
            // 获取列表数据
            _demianList () {
                let params = {
                    domain: this.serchForm.domain,
                    auditStatus: this.serchForm.auditStatus,
                    expired: this.serchForm.expired === true ? 1 : null,
                    expirType: this.serchForm.expirType === true ? 1 : null,
                    domain_order_type: this.serchForm.domain_order_type, // 域名排序：【0：不排序，1：倒序，2：正序】
                    regist_order_type: this.serchForm.regist_order_type, // 注册时间排序：【0：不排序，1：倒序，2：正序】
                    expir_order_type: this.serchForm.expir_order_type, // 到期时间排序：【0：不排序，1：倒序，2：正序】
                    audit_order_type: this.serchForm.audit_order_type, // 实名认证排序：【0：不排序，1：倒序，2：正序】
                    registrant_order_type: this.serchForm.registrant_order_type, // 所属类型排序：【0：不排序，1：倒序，2：正序】
                    account_order_type: this.serchForm.account_order_type, // 账号排序：【0：不排序，1：倒序，2：正序】
                    update_order_type: this.serchForm.update_order_type, // 更新时间排序：【0：不排序，1：倒序，2：正序】
                    page: this.currentPage,
                    pageSize: this.pageSize
                }
                this.tableLoading = true
                demianList(params).then(res => {
                    this.tableData = res.list;
                    this.total = res.total;
                    this.tableLoading = false;
                }).catch(() => {
                    this.tableLoading = false
                })
                this.currentPage = 1;
            },
            changeConfig(){
                this._settingList()
                this.modalConfig=true
            },
            //获取配置数据
            _settingList(){
                settingList().then(res=>{
                    // this.platformList=res.platform
                    if(res.list.length>0){
                        this.modalparams.list=res.list
                    }else{
                         this.modalparams={
                            list:[
                                {
                                    id:'',
                                    platform:'',
                                    access_key_id:'',
                                    access_key_secret:''

                                }
                            ]
                        }
                    }
                    
                })
            },
            addset () {
                this.modalparams.list.push({ 
                    id:'',
                    platform:'',
                    access_key_id:'',
                    access_key_secret:'' 
                })
            },
            removeset (index) {
                this.modalparams.list.splice(index, 1)
            },
            cancelAdd (name) {
                this.modalConfig = false
            },
            submitAdd (name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        this.modal_loading = true
                        settingOoperation({data:this.modalparams.list}).then(res => {
                            if(this.modalparams.list[0].id==''){
                                  this.$Message.success('新增成功')
                            }else{
                                this.$Message.success('编辑成功')
                            }
                          
                            this.modalConfig = false
                            this.modal_loading = false
                            this._demianList()
                        })
                        this.modal_loading=false
                    }
                })
            },
            changeeit (row) {
                this.modalstatus = true;
                this.modalForm.remark = row.remark
                this.$set(this.modalForm, 'id', row.id)
            },
            // 删除
            changstatus (row) {
                this.modaldel = true
                this.id = row.id
            },
            cancel () {
                this.id = null
                this.modaldel = false
                this.modal_loading = false
            },
            del () {
                this.modal_loading = true
                domainInfodel({ id: this.id }).then(res => {
                    this.$Message.info('删除成功');
                    this.changePage(1)
                    this.modal_loading = false
                    this.cancel()
                }).catch(() => {
                    // this.$Message.error('删除失败')
                })
            },
            canceledit (name) {
                this.modalstatus = false
                this.$refs[name].resetFields();
            },
            submitedit (name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        let params = {
                            id: this.modalForm.id,
                            remark: this.modalForm.remark

                        }
                        this.subloading = true;
                        remarkAdd(params).then(res => {
                            this.$Message.success('编辑成功');
                            this.modalstatus = false;
                            this.subloading = false;
                            this.changePage(1)
                            // if (res === 1) {
                            //     this.$Message.success('编辑成功');
                            //     this.modalstatus = false;
                            //     this.subloading = false;
                            //     this.changePage(1)
                            // } else {
                            //     this.$Message.error(res.message);
                            //     this.modalstatus = true;
                            //     this.subloading = false;
                            // }
                        }).catch(() => {
                            this.modalstatus = false
                        })
                    } else {
                        this.$Message.error('请完善表格。');
                    }
                })
            }

        }
    }
</script>
<style scoped>
.fontstyle{
    color: #2d8cf0;
    cursor:pointer;
}
.mr-10{
    margin-right: 10px;
    padding-right:5px ;
    border-right: 1px solid #999;
}
/* .color-red{
    color: #f00;
} */
</style>
